<template>
  <div class="data">
    <el-row class="charts">
      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <div class="board">
          <div class="info">
            <div class="title flex-justify-between">
              <h3>实时数据看板</h3>
              <span>截止至 &nbsp;{{ now }}</span>
            </div>
            <ul class="list flex-justify-around">
              <li><span class="num">36</span><span>今日工单量</span></li>
              <li><span class="num">12</span><span>待派工工单</span></li>
              <li><span class="num">24</span><span>处理中工单</span></li>
              <li><span class="num">17</span><span>待完成工单</span></li>
              <li><span class="num">11</span><span>待结算工单</span></li>
              <li><span class="num">888</span><span>本年工单量</span></li>
            </ul>
            <el-row class="cards flex-justify-between">
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="card">
                  <div class="tips">
                    <span class="top">今日工单量</span>
                    <span class="num">210</span>
                    <span class="date">较昨日&nbsp;<el-icon>
                        <CaretTop />
                      </el-icon>0.9%</span>
                  </div>
                  <div ref="chartsRef1" style="width: 100%; height: 150px"></div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
                <div class="card">
                  <div class="tips">
                    <span class="top">待结算工单量</span>
                    <span class="num">210</span>
                    <span class="date">较昨日&nbsp;<el-icon>
                        <CaretBottom />
                      </el-icon>0.9%</span>
                  </div>
                  <div ref="chartsRef2" style="width: 100%; height: 150px"></div>
                </div>
              </el-col>
            </el-row>
            <div class="dataCard-view">
              <div class="search">
                <el-date-picker class="sele-date" v-model="selectTime" type="daterange" range-separator="~"
                  start-placeholder="开始时间" end-placeholder="结束时间" @change="dateChange" />
              </div>
              <div ref="chartsRef3" style="width: 100%; height: 280px"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <el-row class="main">
          <el-col :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
            <div class="nav">
              <div class="info">
                <h3>快速导航</h3>
                <ul class="cards flex-justify-between">
                  <li>
                    <div class="card">
                      <el-icon>
                        <CollectionTag />
                      </el-icon>
                      <span>工单管理</span>
                    </div>
                  </li>
                  <li>
                    <div class="card">
                      <el-icon>
                        <CollectionTag />
                      </el-icon>
                      <span>服务区域</span>
                    </div>
                  </li>
                  <li>
                    <div class="card">
                      <el-icon>
                        <CollectionTag />
                      </el-icon>
                      <span>用户档案</span>
                    </div>
                  </li>
                </ul>
                <ul class="cards flex-justify-between">
                  <li>
                    <div class="card">
                      <el-icon>
                        <CollectionTag />
                      </el-icon>
                      <span>产品档案</span>
                    </div>
                  </li>
                  <li>
                    <div class="card">
                      <el-icon>
                        <CollectionTag />
                      </el-icon>
                      <span>配件档案</span>
                    </div>
                  </li>
                  <li>
                    <div class="card">
                      <el-icon>
                        <CollectionTag />
                      </el-icon>
                      <span>知识中心</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
            <div class="notice">
              <div class="info">
                <div class="title flex-justify-between">
                  <h3>公告</h3>
                  <span class="flex-justify-between">查看全部<el-icon>
                      <ArrowRight />
                    </el-icon></span>
                </div>
                <div class="list">
                  <ul class="items">
                    <li>
                      <div class="item flex-justify-between">
                        <div class="left flex-align-center">
                          <span class="tips">通知</span>
                          <span class="text">关于工程师结算单审核流程</span>
                        </div>
                        <span class="time">{{ notice }}</span>
                      </div>
                    </li>
                    <li>
                      <div class="item flex-justify-between">
                        <div class="left flex-align-center">
                          <span class="tips">通知</span>
                          <span class="text">客户回访操作流程</span>
                        </div>
                        <span class="time">{{ notice }}</span>
                      </div>
                    </li>
                    <li>
                      <div class="item flex-justify-between">
                        <div class="left flex-align-center">
                          <span class="tips">通知</span>
                          <span class="text">售后服务处理规范</span>
                        </div>
                        <span class="time">{{ notice }}</span>
                      </div>
                    </li>
                    <li>
                      <div class="item flex-justify-between">
                        <div class="left flex-align-center">
                          <span class="tips">通知</span>
                          <span class="text">售后部门工作规范及岗位职责</span>
                        </div>
                        <span class="time">{{ notice }}</span>
                      </div>
                    </li>
                  </ul>
                  <div class="footer flex-center"><span>-没有更多了-</span></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="charts">
      <el-col :xs="24" :sm="24" :md="12" :lg="9" :xl="9">
        <div class="chart">
          <div class="info">
            <div class="title flex-justify-between mb20">
              <h3>服务类型占比</h3>
              <span class="flex-justify-between">详细<el-icon>
                  <ArrowRight />
                </el-icon></span>
            </div>
            <div ref="chartsRef4" style="width: 100%; min-width: 360px; height: 200px"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="9" :xl="9">
        <div class="chart">
          <div class="info">
            <div class="title flex-justify-between mb20">
              <h3>服务区域分布</h3>
              <span class="flex-justify-between">详细<el-icon>
                  <ArrowRight />
                </el-icon></span>
            </div>
            <div ref="chartsRef5" style="width: 100%; min-width: 360px; height: 200px"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <div class="chart">
          <div class="info">
            <h3>客服处理工单排名</h3>
            <p>仅统计当月工单数</p>
            <div class="rank">
              <ul class="text flex-justify-between">
                <li><span>排行</span></li>
                <li><span>名称</span></li>
                <li><span>处理工单数</span></li>
                <li><span>工单总数</span></li>
                <li><span>完成率</span></li>
              </ul>
              <ul class="content">
                <li v-for="(item, index) in rankList" class="flex-justify-between">
                  <span :class="index + 1 == 1 ? 'one' : index + 1 == 2 ? 'two' : index + 1 == 3 ? 'thi' : ''
                    ">{{ index + 1 }}</span>
                  <span>{{ item.name }}</span>
                  <span>{{ item.num }}</span>
                  <span>{{ item.total }}</span>
                  <span>{{ item.rate }}</span>
                </li>
              </ul>
              <div class="footer flex-center"><span>-没有更多了-</span></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="charts">
      <el-col :xs="24" :sm="24" :md="12" :lg="9" :xl="9">
        <div class="chart">
          <div class="info">
            <div class="title flex-justify-between">
              <h3>网点服务排行</h3>
              <span class="flex-justify-between">详细<el-icon>
                  <ArrowRight />
                </el-icon></span>
            </div>
            <div ref="chartsRef6" style="width: 100%; height: 200px"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="9" :xl="9">
        <div class="chart">
          <div class="info">
            <div class="title flex-justify-between">
              <h3>工单状态分布</h3>
            </div>
            <div ref="chartsRef7" style="width: 100%; height: 200px"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
const selectTime = ref()
const startTime = ref() // 开始时间
const endTime = ref() // 结束时间

const now = ref()
const notice = ref()
// 获取当前时间
const time = new Date()
const y = ref(time.getFullYear()) // 年
const m = ref((time.getMonth() + 1).toString()) // 月
m.value = m.value.toString().padStart(2, '0')
const d = ref(time.getDate().toString()) // 日
d.value = d.value.toString().padStart(2, '0')
now.value = y.value + '/' + m.value + '/' + d.value + ' ' + time.toLocaleTimeString() // 截止时间
notice.value = y.value + '/' + m.value + '/' + d.value // 公告通知时间
selectTime.value = [y.value + '-' + m.value + '-' + '01', y.value + '-' + m.value + '-' + d.value] // 搜索框显示默认时间

// 时间变化时
const dateChange = (val: any) => {
  if (val) {
    let y1 = val[0].getFullYear()
    let m1 = String(val[0].getMonth() + 1)
    m1 = m1.padStart(2, '0')
    let d1 = String(val[0].getDate())
    d1 = d1.padStart(2, '0')
    startTime.value = y1 + '-' + m1 + '-' + d1
    console.log(`开始时间 => ${startTime.value}`)
    let y2 = val[1].getFullYear()
    let m2 = String(val[1].getMonth() + 1)
    m2 = m2.padStart(2, '0')
    let d2 = String(val[1].getDate())
    d2 = d2.padStart(2, '0')
    endTime.value = y2 + '-' + m2 + '-' + d2
    console.log(`结束时间 => ${endTime.value}`)
  }
}

const chartsRef1 = ref<HTMLElement | null>() // 今日工单量
const chartsRef2 = ref<HTMLElement | null>() // 待结算工单量
const chartsRef3 = ref<HTMLElement | null>() // 实时服务数据
const chartsRef4 = ref<HTMLElement | null>() // 服务类型占比
const chartsRef5 = ref<HTMLElement | null>() // 服务区域分布
const chartsRef6 = ref<HTMLElement | null>() // 网点服务排行
const chartsRef7 = ref<HTMLElement | null>() // 工单状态分布

// 今日工单量
const options1 = {
  color: ['#00c0c0'], // 颜色配置
  tooltip: {
    // 提示框
    // trigger: 'axis',
    textStyle: {
      fontSize: 12,
    },
  },
  grid: {
    // 位置
    left: -20,
    right: '0%',
    bottom: '18%',
    containLabel: true,
  },
  xAxis: {
    // X轴
    type: 'category',
    boundaryGap: false,
    data: ['07/07', '07/08', '07/09', '07/10', '07/11', '07/12'],
    axisLabel: {
      // 刻度标签
      fontSize: 10,
      interval: 0,
      margin: 12,
      padding: [0, 120, 0, 0],
    },
    axisLine: {
      // 轴线
      show: false,
    },
    axisTick: {
      // 刻度
      show: false,
      alignWithLabel: true,
    },
  },
  yAxis: {
    // Y轴
    type: 'value',
    show: false,
  },
  series: [
    {
      name: '今日工单量',
      data: [25, 20, 23, 30, 22, 28],
      type: 'line', // 折线图
      smooth: true, // 平滑显示
      symbolSize: 0, // 标记大小
      fontSize: 12,
      areaStyle: {
        // 显示面积
        color: '#00c0c0',
        opacity: 0.3,
      },
    },
  ],
}

// 待结算工单
const options2 = {
  color: ['#007cff'], // 颜色配置
  tooltip: {
    // 提示框
    // trigger: 'axis',
    textStyle: {
      fontSize: 12,
    },
  },
  grid: {
    // 位置
    left: -20,
    right: '0%',
    bottom: '18%',
    containLabel: true,
  },
  xAxis: {
    // X轴
    type: 'category',
    boundaryGap: false,
    data: ['07/07', '07/08', '07/09', '07/10', '07/11', '07/12'],
    axisLabel: {
      // 刻度标签
      fontSize: 10,
      interval: 0,
      margin: 12,
      padding: [0, 120, 0, 0],
    },
    axisLine: {
      // 轴线
      show: false,
    },
    axisTick: {
      // 刻度
      show: false,
      alignWithLabel: true,
    },
  },
  yAxis: {
    // Y轴
    type: 'value',
    show: false,
  },
  series: [
    {
      name: '待结算工单',
      data: [10, 16, 20, 30, 12, 6],
      type: 'line', // 折线图
      smooth: true, // 平滑显示
      symbolSize: 0, // 标记大小
      areaStyle: {
        // 显示面积
        color: '#007cff',
        opacity: 0.3,
      },
    },
  ],
}

// 总览
const options3 = {
  color: ['#00c0c0', '#007cff'], // 颜色配置
  tooltip: {
    // 提示框
    trigger: 'axis',
    textStyle: {
      fontSize: 12,
    },
  },
  legend: {
    // 图例样式
    itemGap: 20,
    itemWidth: 15,
    top: 15,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      rich: {
        a: {
          verticalAlign: 'middle',
        },
      },
      padding: [0, 0, -2, 0],
    },
    data: [
      {
        name: '今日新增工单',
        icon: 'circle',
        textStyle: {
          fontSize: 12,
        },
      },
      {
        name: '今日完成工单',
        icon: 'circle',
        textStyle: {
          fontSize: 12,
        },
      },
    ],
  },
  grid: {
    // 位置
    left: '0%',
    right: '0%',
    bottom: '0%',
    containLabel: true,
  },
  xAxis: {
    // X轴
    type: 'category',
    data: [],
    axisLabel: {
      // 刻度标签
      fontSize: 10,
      interval: 0,
      margin: 15,
      rotate: 45,
    },
    axisTick: {
      // 刻度
      alignWithLabel: true,
    },
  },
  yAxis: {
    // Y轴
    type: 'value',
    axisLabel: {
      fontSize: 10,
    },
    splitLine: {
      lineStyle: {
        type: 'solid',
        color: '#f5f7f8',
      },
    },
  },
  series: [
    {
      name: '今日新增工单',
      type: 'line', // 折线图
      data: [
        220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234,
        290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 182, 191, 234,
      ],
      smooth: true, // 平滑显示
      symbolSize: 0, // 标记大小
    },
    {
      name: '今日完成工单',
      type: 'line', // 折线图
      data: [
        120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 90, 230, 210, 120,
        132, 101, 134, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90,
      ],
      smooth: true, // 平滑显示
      symbolSize: 0, // 标记大小
    },
  ],
}

const data1 = ref([
  {
    id: '07-01',
  },
  {
    id: '07-02',
  },
  {
    id: '07-03',
  },
  {
    id: '07-04',
  },
  {
    id: '07-05',
  },
  {
    id: '07-06',
  },
  {
    id: '07-07',
  },
  {
    id: '07-08',
  },
  {
    id: '07-09',
  },
  {
    id: '07-10',
  },
  {
    id: '07-11',
  },
  {
    id: '07-12',
  },
  {
    id: '07-13',
  },
  {
    id: '07-14',
  },
  {
    id: '07-15',
  },
  {
    id: '07-16',
  },
  {
    id: '07-17',
  },
  {
    id: '07-18',
  },
  {
    id: '07-19',
  },
  {
    id: '07-20',
  },
  {
    id: '07-21',
  },
  {
    id: '07-22',
  },
  {
    id: '07-23',
  },
  {
    id: '07-24',
  },
  {
    id: '07-25',
  },
  {
    id: '07-26',
  },
  {
    id: '07-27',
  },
  {
    id: '07-28',
  },
  {
    id: '07-29',
  },
  {
    id: '07-30',
  },
  {
    id: '07-31',
  },
])
options3.xAxis.data = data1.value.map(function (item) {
  return item.id
})

const data2 = [
  { name: '检测', value: 10 },
  { name: '维修', value: 15 },
  { name: '保养', value: 32 },
  { name: '测量', value: 6 },
  { name: '安装', value: 25 },
  { name: '其他', value: 22 },
  { name: '保养1', value: 32 },
  { name: '测量1', value: 6 },
  { name: '安装1', value: 25 },
  { name: '其他666666', value: 22 },
]

const data3 = [
  { name: '广西壮族自治区', value: 66 },
  { name: '广东省', value: 52 },
  { name: '四川省', value: 32 },
  { name: '重庆市', value: 20 },
  { name: '西藏自治区', value: 12 },
  { name: '新疆维吾尔自治区', value: 8 },
  { name: '青海省', value: 52 },
  { name: '贵州省', value: 32 },
  { name: '云南省', value: 20 },
  { name: '陕西省', value: 12 },
  { name: '湖南省', value: 8 },
]

let data4 = []
let data5 = []
let data6 = []

for (let i = 0; i < 10; i++) {
  data4.push(Math.ceil(+(Math.random() * 100).toFixed(2)))
  data5.push(Math.ceil(+(Math.random() * 100).toFixed(2)))
  data6.push(Math.ceil(+(Math.random() * 100).toFixed(2)))
}

var totalOrder = 0
data2.forEach((element) => {
  totalOrder += Number(element.value)
})

// 服务类型占比
const options4 = {
  color: [
    // 颜色配置
    '#007cff',
    '#00c0c0',
    '#e69103',
    '#a06eff',
    '#50cd89',
    '#b5bdcb',
    '#1c7fde',
    '#36c4d0',
    '#fc9245',
    '#25c251',
  ],
  tooltip: {
    // 提示框
    trigger: 'item',
    textStyle: {
      fontSize: 12,
    },
  },
  graphic: [
    // 文本块
    {
      type: 'text',
      left: '60px',
      top: '35%',
      style: {
        text: '总工单数量' + '\n\n' + totalOrder,
        textAlign: 'center',
        width: 30,
        height: 30,
        fontSize: 12,
      },
    },
  ],
  legend: {
    // 图例样式
    orient: 'vertical',
    y: 'middle',
    align: 'left',
    itemHeight: 12,
    itemGap: 15, // 每项之间距离
    right: 0,
    data: data2,
    icon: 'circle',
    type: 'scroll', // 翻页
    pageIconSize: [30, 10], // 翻页按钮大小 [宽，高]
    pageTextStyle: {
      // 翻页文本大小
      fontSize: 12,
    },
    tooltip: {
      // 提示框
      show: true,
    },
    formatter: function (name) {
      // 格式化文本
      const than = data2 //获取series中的data
      let value = 0
      for (let i = 0, l = than.length; i < l; i++) {
        if (than[i].name == name) {
          value = than[i].value
        }
      }
      let str = ''
      const len = name.length
      let mid = 4 - len
      if (len > 5) {
        name = name.slice(0, 5) + '...'
      } else {
        mid = 5 - len
        while (mid) {
          // str+='\xa0\xa0\xa0'; // 按最长的项对齐
          str += ''
          mid--
        }
        name = name + str
      }
      var arr =
        '{a|' +
        name +
        '}{b|' +
        ' | ' +
        '}{c|' +
        ((value / totalOrder) * 100).toFixed(2) +
        '%' +
        '}' +
        '{d|' +
        value +
        '}'
      return arr
    },
    textStyle: {
      // 文本样式
      width: 200,
      padding: [0, 0, -2, 0],
      rich: {
        a: {
          padding: [0, 5, 0, 0],
        },
        b: {
          color: '#007cff',
        },
        c: {
          align: 'right',
          padding: [0, 50, 0, 0],
        },
        d: {
          align: 'right',
        },
      },
    },
  },
  series: [
    {
      type: 'pie', // 饼图
      radius: ['60%', '80%'], // [内半径,外半径=圆的大小]
      center: ['90px', '42%'], // 圆心位置
      label: {
        // 标签
        show: false,
      },
      data: data2,
    },
  ],
}

// 服务区域分布
const options5 = {
  color: [
    // 颜色配置
    '#007cff',
    '#00c0c0',
    '#e69103',
    '#a06eff',
    '#50cd89',
    '#b5bdcb',
    '#cbad62',
    '#7dcc29',
    '#36a6f2',
    '#5b6ef7',
  ],
  tooltip: {
    // 提示框
    trigger: 'item',
    textStyle: {
      fontSize: 12,
    },
  },
  legend: {
    // 图例样式
    orient: 'vertical',
    y: 'middle',
    itemHeight: 12,
    itemGap: 15, //  每项之间距离
    right: 0,
    data: data3,
    icon: 'circle',
    type: 'scroll', // 翻页
    pageIconSize: [30, 10], // 翻页按钮大小 [宽，高]
    pageTextStyle: {
      // 翻页文本大小
      fontSize: 12,
    },
    tooltip: {
      // 提示框
      show: true,
    },
    formatter: function (name) {
      // 格式化文本
      const than = data3 //获取series中的data
      let value = 0
      for (let i = 0, l = than.length; i < l; i++) {
        if (than[i].name == name) {
          value = than[i].value
        }
      }
      let str = ''
      const len = name.length
      let mid = 4 - len
      if (len > 3) {
        name = name.slice(0, 3) + '...'
      } else {
        mid = 3 - len
        while (mid) {
          str += ''
          mid--
        }
        name = name + str
      }
      var arr =
        '{a|' +
        name +
        '}{b|' +
        ' | ' +
        '}{c|' +
        ((value / totalOrder) * 100).toFixed(2) +
        '%' +
        '}' +
        '{d|' +
        value +
        '}'
      return arr
    },
    textStyle: {
      // 文本样式
      width: 200,
      padding: [0, 0, -2, 0],
      rich: {
        a: {
          padding: [0, 5, 0, 0],
        },
        b: {
          color: '#007cff',
        },
        c: {
          align: 'right',
          padding: [0, 40, 0, 0],
        },
        d: {
          align: 'right',
        },
      },
    },
  },
  series: [
    {
      type: 'pie', // 饼图
      radius: '80%', // 半径
      center: ['90px', '42%'], // 圆心位置
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      label: {
        show: false,
      },
      data: data3,
    },
  ],
}

// 网点服务排行
const options6 = {
  color: ['#007cff', '#00c0c0', '#e69103'], // 颜色配置
  tooltip: {
    // 提示框
    trigger: 'axis',
    textStyle: {
      fontSize: 12,
    },
  },
  grid: {
    // 位置·
    left: '0%',
    right: '1%',
    bottom: '0%',
    containLabel: true,
  },
  legend: {
    // 图例样式
    top: 15,
    itemGap: 15,
    itemWidth: 15,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      rich: {
        a: {
          verticalAlign: 'middle',
        },
      },
      padding: [0, 0, -2, 0],
    },
    data: [
      {
        name: '安装',
        icon: 'circle',
        textStyle: {
          fontSize: 12,
        },
      },
      {
        name: '维修',
        icon: 'circle',
        textStyle: {
          fontSize: 12,
        },
      },
      {
        name: '保养',
        icon: 'circle',
        textStyle: {
          fontSize: 12,
        },
      },
    ],
  },
  xAxis: {
    // X轴
    type: 'value',
    axisLabel: {
      // 刻度标签
      fontSize: 10,
    },
    splitLine: {
      // 颜色配置
      lineStyle: {
        // 分隔线
        type: 'dashed',
      },
    },
  },
  yAxis: {
    // Y轴
    type: 'category',
    axisTick: {
      // 刻度
      alignWithLabel: true,
    },
    axisLabel: {
      // 刻度标签
      width: 100,
      fontSize: 10,
      margin: 10,
      overflow: 'truncate',
    },
    data: ['广州分部', '广东中山分部', '陕西西安分部', '广西服务商', '北京总部网点'],
  },
  series: [
    {
      barWidth: 12,
      name: '安装',
      type: 'bar', // 柱状图
      stack: 'one', // 数据堆叠
      data: data4,
    },
    {
      name: '维修',
      type: 'bar', // 柱状图
      stack: 'one', // 数据堆叠
      data: data5,
    },
    {
      name: '保养',
      type: 'bar', // 柱状图
      stack: 'one', // 数据堆叠
      data: data6,
    },
  ],
}

// 工单状态分布
const options7 = {
  color: ['#007cff'], // 颜色配置
  grid: {
    // 位置
    left: '0%',
    right: '0%',
    bottom: '0%',
    containLabel: true,
  },
  xAxis: {
    // X轴
    type: 'category',
    axisTick: {
      // 刻度
      alignWithLabel: true,
    },
    axisLabel: {
      // 刻度标签
      fontSize: 10,
      interval: 0,
      margin: 12,
    },
    data: ['待客服确认', '待派单', '待网点确认', '处理中', '已完成', '已作废'],
  },
  yAxis: {
    // Y轴
    name: '数量',
    nameGap: 20,
    nameTextStyle: {
      padding: [0, 25, 0, 0],
    },
    type: 'value',
    axisLabel: {
      fontSize: 10,
    },
    splitLine: {
      // 分隔线
      lineStyle: {
        type: 'dashed',
        color: '#cccccc',
      },
    },
  },
  series: [
    {
      type: 'bar', // 柱状图
      label: {
        show: true,
        position: 'top',
      },
      smooth: true,
      barWidth: 40,
      data: [523, 726, 666, 372, 427, 548, 625],
    },
  ],
}
const lookW = ref()
// 渲染图表
const initChart = () => {
  const chart1 = echarts.init(chartsRef1.value)
  chart1.setOption(options1) // 今日工单量图表
  const chart2 = echarts.init(chartsRef2.value)
  chart2.setOption(options2) // 待结算工单量图表
  const chart3 = echarts.init(chartsRef3.value)
  chart3.setOption(options3) // 总数据图表
  const chart4 = echarts.init(chartsRef4.value)
  chart4.setOption(options4) // 服务类型占比图表
  const chart5 = echarts.init(chartsRef5.value)
  chart5.setOption(options5) // 服务区域分布图表
  const chart6 = echarts.init(chartsRef6.value)
  chart6.setOption(options6) // 网点服务排行图表
  const chart7 = echarts.init(chartsRef7.value)
  chart7.setOption(options7) // 工单状态分布图表
  if (chartsRef5.value.clientWidth < 560) {
    options5.series[0].radius = (80 * chartsRef5.value.clientWidth) / 560 + '%'
    options5.series[0].center[0] = (90 * chartsRef5.value.clientWidth) / 560 + 'px'
    options4.series[0].radius[1] = (80 * chartsRef4.value.clientWidth) / 560 + '%'
    options4.series[0].radius[0] = (60 * chartsRef4.value.clientWidth) / 560 + '%'
    options4.series[0].center[0] = (90 * chartsRef4.value.clientWidth) / 560 + 'px'
    options4.graphic[0].left = (60 * chartsRef4.value.clientWidth) / 560 + 'px'
    options4.graphic[0].style.fontSize = (12 * chartsRef4.value.clientWidth) / 560
    chart4.setOption(options4) // 服务类型占比图表
    chart5.setOption(options5) // 服务区域分布图表
  }

  // 监听图表容器的大小并改变图表大小
  window.addEventListener(
    'resize',
    (lookW.value = () => {
      if (chartsRef5.value.clientWidth < 500) {
        options5.series[0].radius = (80 * chartsRef5.value.clientWidth) / 500 + '%'
        options5.series[0].center[0] = (90 * chartsRef5.value.clientWidth) / 500 + 'px'
        options4.series[0].radius[1] = (80 * chartsRef4.value.clientWidth) / 500 + '%'
        options4.series[0].radius[0] = (60 * chartsRef4.value.clientWidth) / 500 + '%'
        options4.series[0].center[0] = (90 * chartsRef4.value.clientWidth) / 500 + 'px'
        options4.graphic[0].left = (60 * chartsRef4.value.clientWidth) / 500 + 'px'
        options4.graphic[0].style.fontSize = (12 * chartsRef4.value.clientWidth) / 500
        if (window.innerWidth < 400) {
          options5.series[0].radius =
            (((80 * chartsRef5.value.clientWidth) / 500) * window.innerWidth) / 400 + '%'
          options5.series[0].center[0] =
            (((90 * chartsRef5.value.clientWidth) / 500) * window.innerWidth) / 400 + 'px'
          options4.series[0].radius[1] =
            (((80 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400 + '%'
          options4.series[0].radius[0] =
            (((60 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400 + '%'
          options4.series[0].center[0] =
            (((90 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400 + 'px'
          options4.graphic[0].style.fontSize =
            (((12 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400
          options4.graphic[0].left =
            (((60 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400 + 'px'
        }
      } else {
        options5.series[0].radius = '80%'
        options5.series[0].center[0] = '90px'
        options4.series[0].radius = ['60%', '80%']
        options4.series[0].center[0] = '90px'
        options4.graphic = [
          {
            type: 'text',
            left: '60px',
            top: '35%',
            style: {
              text: '总工单数量' + '\n\n' + totalOrder,
              textAlign: 'center',
              width: 30,
              height: 30,
              fontSize: 12,
            },
          },
        ]
      }
      chart4.setOption(options4) // 服务类型占比图表
      chart5.setOption(options5) // 服务区域分布图表
      chart1.resize()
      chart2.resize()
      chart3.resize()
      chart4.resize()
      chart5.resize()
      chart6.resize()
      chart7.resize()
    }),
  )
}

// 页面挂载
onMounted(() => {
  initChart()
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', lookW.value)
})

const rankList = [
  {
    name: '张三',
    num: 334,
    total: 523,
    rate: '12.34%',
  },
  {
    name: '张四',
    num: 220,
    total: 425,
    rate: '20.34%',
  },
  {
    name: '张五',
    num: 542,
    total: 720,
    rate: '52.34%',
  },
  {
    name: '张六',
    num: 112,
    total: 335,
    rate: '32.34%',
  },
]
</script>

<style scoped lang="scss">
@import './index';
</style>
